<template>
  <div></div>
  <!-- <el-card>
    <div class="chat-box" ref="chatBox">
      <div v-for="(msg, index) in messages" :key="index" class="message">
        <div v-if="msg.type === 'user'" class="user-message">
          <img :src="avatar" alt="User" class="avatar" />
          <div class="message-content user-message-content">
            {{ msg.content }}
          </div>
        </div>
        <div v-if="msg.type === 'bot'" class="bot-message">
          <img :src="avatar_bot" alt="Bot" class="avatar" />
          <div class="message-content bot-message-content">
            {{ msg.content }}
          </div>
        </div>
      </div>
    </div>
    <div class="input-area">
      <el-input
        v-model="input"
        placeholder="请输入您的问题..."
        @keyup.enter.native="sendMessage"
        class="input-field"
        :style="{ maxWidth: 'calc(100% - 100px)' }"
      ></el-input>
      <el-button type="primary" @click="sendMessage">发送</el-button>
    </div>
  </el-card> -->
</template>
<script>
export default {
  data() {
    return {
      input: "",
      messages: [],
      avatar: "https://img01.yzcdn.cn/vant/cat.jpeg",
      avatar_bot: require("./robot.png"),
    };
  },
  methods: {
    sendMessage() {
      console.log("消息:", this.input);
      if (this.input.trim() === "") return;

      this.messages.push({ type: "user", content: this.input });
      const userInput = this.input;
      this.input = "";

      setTimeout(() => {
        this.messages.push({
          type: "bot",
          content: `
        您说了: ${userInput} \n
        `,
        });
        this.scrollToBottom();
      }, 500);

      this.scrollToBottom();
    },
    scrollToBottom() {
      this.$nextTick(() => {
        this.$refs.chatBox.scrollTop = this.$refs.chatBox.scrollHeight;
      });
    },
  },
};
</script>

<style scoped>
.chat-box {
  height: calc(100vh - 210px);
  overflow-y: auto;
  padding: 10px;
  border-bottom: 1px solid #dcdfe6;
}
.input-area {
  display: flex;
  align-items: center;
  margin-top: 10px;
}
.message {
  margin: 10px 0;
  display: flex;
  align-items: center;
}
.user-message,
.bot-message {
  margin-top: 2px;
  display: flex;
  align-items: center;
}
.avatar {
  border-radius: 50%;
  margin-right: 10px;
  width: 50px;
  height: 50px;
}
.input-field {
  flex: 1;
  margin-right: 10px;
  max-width: calc(100% - 100px);
}
.message-content {
  max-width: 100%; /* 确保消息内容框不超过聊天框宽度 */
  background-color: #f0f0f0; /* 随意选择背景颜色 */
  border-radius: 5px; /* 圆角 */
  padding: 10px; /* 内边距 */
  overflow-wrap: break-word; /* 使长文本换行 */
  white-space: normal; /* 允许文本在标签内换行 */
  word-wrap: break-word; /* 兼容旧版浏览器 */
}
.user-message-content {
  background-color: #d1e7dd; /* 用户消息的背景颜色 */
}
.bot-message-content {
  background-color: #cfe2ff; /* 机器人消息的背景颜色 */
}
</style>

